<template>
    <div id="myEcharts"></div>
</template>
<script setup>
import * as echarts from 'echarts';
let myChart = null;
const props = defineProps({
    option: Object,
})
//重绘
const resizeHandler = () => {
    myChart.resize();
}
//设置防抖
const debounce = (fun, delay) => {
    let timer;
    return function () {
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(() => {
            fun();
        }, delay);
    }
};
const cancalDebounce = debounce(resizeHandler, 500);

onBeforeUnmount(() => {
    window.removeEventListener('resize', cancalDebounce)
    myChart.dispose()
})

watch(() => props.option, () => {
    myChart.setOption(props.option, true);
})

onMounted(() => {
    let myChart = echarts.init(document.getElementById("myEcharts"));
    myChart.setOption(props.option, true);
    window.addEventListener('resize', cancalDebounce);
})
</script>
<style lang="less" scoped>
#myEcharts{
    width: 100%;
    height: 100%
}
</style>
